<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="GPS详情">
        <card class="add-info-card" title="GPS详情" toggle>
          <div class="section-item gray">
            <div class="section-item-content">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="设备编号">{{ carInfo.vehicleNum }}</a-descriptions-item>
                <a-descriptions-item label="设备类型">{{ carInfo.vehicleTypeStr }}</a-descriptions-item>
                <a-descriptions-item label="设备品牌">{{ carInfo.vehicleFirmName }}</a-descriptions-item>
                <a-descriptions-item v-if="carInfo.vehicleFirmName == '驭联'" label="驭联code码">{{
                  carInfo.vehicleCode
                }}</a-descriptions-item>
                <a-descriptions-item label="设备型号">{{ carInfo.vehicleModelStr }}</a-descriptions-item>
                <a-descriptions-item label="设备供应商">{{ carInfo.supplierName }}</a-descriptions-item>
                <a-descriptions-item label="接电方式">{{ carInfo.connectionModeStr }}</a-descriptions-item>
                <a-descriptions-item label="电量">{{ carInfo.electricQuantity }}</a-descriptions-item>
                <a-descriptions-item label="安装车辆">{{ carInfo.licenseNo }}</a-descriptions-item>
                <a-descriptions-item label="安装人">{{ carInfo.installerStr }}</a-descriptions-item>
                <a-descriptions-item label="安装位置">{{ carInfo.installationSite }}</a-descriptions-item>
                <a-descriptions-item label="安装时间">{{ carInfo.installationTime }}</a-descriptions-item>
                <a-descriptions-item label="设备状态">{{ carInfo.statusStr }}</a-descriptions-item>
                <a-descriptions-item span="3" label="GPS备注">{{ carInfo.remark }}</a-descriptions-item>
                <a-descriptions-item span="3" label="照片">
                  <upload-img v-model="carInfo.installationPhotoList" disabled />
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
        <card class="add-info-card" title="处置信息" toggle v-if="carInfo && carInfo.handleTypeStr">
          <div class="section-item gray">
            <div class="section-item-content">
              <a-descriptions :size="size" :align="{ label: 'right' }">
                <a-descriptions-item label="处置方式">{{ carInfo.handleTypeStr }}</a-descriptions-item>
                <a-descriptions-item label="处置人">{{ carInfo.handlePersonStr }}</a-descriptions-item>
                <a-descriptions-item label="处置时间">{{ carInfo.handleTime }}</a-descriptions-item>
                <a-descriptions-item label="处置备注">{{ carInfo.handleRemark }}</a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
        </card>
      </a-tab-pane>
      <a-tab-pane key="2" title="操作记录">
        <OperateLog :id="routePrams.id" type="7" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="CarVehicleDetail">
  import { vehicleDetail } from '@/api/asset/vehicle'
  import { onMounted, ref, watch } from 'vue'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const routeQuery = route.query
  const activeType = ref('1')
  if (routeQuery.activeType) {
    activeType.value = routeQuery.activeType
  }
  const carInfo = ref({})
  const getDetail = (id) => {
    vehicleDetail({ id: id }).then((res) => {
      carInfo.value = res.result
    })
  }
  // 默认选中某个 tab
  watch(
    () => routeQuery.activeType,
    (newVal) => {
      if (newVal) activeType.value = routeQuery.activeType
    },
    { immediate: true }
  )
  onMounted(() => {
    const id = routePrams.id
    if (id) {
      getDetail(id)
    }
  })
</script>

<style lang="less" scoped>
  .section-item + .section-item {
    margin-top: 16px;
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
</style>
